// 定义图片懒加载指令

// 1.引进来默认图片 在图片发生加载错误时使用
import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    app.directive('imglazy', {
      mounted (el, binding) {
        // el:img DOM对象
        // binding.value 图片url地址
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调
          { threshold: 0 }
        )
      }
    })
  }
}
